<template>
  <div class="bz">
      <Breadcrumb>
          <BreadcrumbItem>奖品</BreadcrumbItem>
          <BreadcrumbItem>宝藏列表</BreadcrumbItem>
      </Breadcrumb>

    <!--S系统投放资金-->
    <div id="invest">活动已发放金额:{{expend}}元 / 活动投放总额:{{invest}}元</div>
    <!--E系统投放资金-->
    <!--S投放宝藏按钮--><Button id="put-button" type="primary" @click="system_drawer = true">投放宝藏</Button>

    <!--S列表-->
    <Table :columns="th" :data="tr"></Table>
    <!--E列表-->

    <!--S系统宝藏抽屉-->
    <Drawer title="选择系统宝藏" :width="512" :closable="true" v-model="system_drawer">
        <Row>
            <Col :lg="8" v-for="(item,index) in system_bz">
                <div class="system-list" @click="clickSystemBz(index)">
                    <Card :bordered="false" style="background:none;">
                        <img class="icon" :src="item.icon_url" />
                        <p class="name">{{item.name}}</p>
                    </Card>
                </div>
            </Col>
        </Row>
    </Drawer>
    <!--E系统宝藏抽屉-->

    <!--S设置活动宝藏抽屉-->
    <Drawer :title="this.doing == 'add' ? '添加宝藏' : '修改宝藏'" :closable="true" :mask-closable="false" v-model="bz_drawer" :width="400">
        <Form ref="data" :model="data" :rules="rules">
            <FormItem prop="money" label="宝藏价值(可兑换人民币)">
                <Input type="text" v-model="data.money" placeholder="宝藏价值(可兑换人民币)"></Input>
            </FormItem>
            <FormItem prop="number" label="投放数量">
                <Input type="text" v-model.number="data.number" placeholder="投放数量"></Input>
            </FormItem>
            <FormItem prop="user_number" label="用户最多获得数量(0=不限制)">
                <Input type="text" v-model.number="data.user_number" placeholder="用户最多获得数量"></Input>
            </FormItem>
            <FormItem prop="win_odds" label="中奖几率(1表示中奖率为100%，数字越大中奖率越低。多个中奖几率为1则随机投放其中一个)">
                <Input type="text" v-model.number="data.win_odds" placeholder="中奖几率"></Input>
            </FormItem>
            <FormItem>
                <Button @click="submit('data')" :loading="submit_loading">
                    <template v-if="this.doing == 'add'">确认投放</template>
                    <template v-else>修改投放</template>
                </Button>
            </FormItem>
        </Form>
    </Drawer>
    <!--E设置活动宝藏抽屉-->
  </div>
</template>

<script>
import common from '../../common/common.js';
export default {
  name: 'bz',
  data(){
    var self = this;
    return {
      //--公共--
      activity_id:sysinfo.activity_id,
      treasure_id:0,  //操作的宝藏id
      doing:'add',  //添加或者修改宝藏
      //列表
      th:[
          {
            title:'宝藏名',
            key:'name'
          },
          {
             title:'图标',
             key:'icon_url',
             render:(h,params)=>{
                 return h('img',{
                     attrs:{
                         src:params.row.icon_url
                     },
                     style:{
                         width:'40px',
                         height:'40px',
                         verticalAlign:'middle',
                         objectFit: 'contain'
                     }
                 });
             }
          },
          {
              title:'可兑换金额',
              key:'money'
          },
          {
              title:'发放数量/投放数量',
              key:'number',
              render:(h,params)=>{
                  return h('span',{},params.row.give_number+'/'+params.row.number);
              }
          },
          {
              title:'用户最多获取数量',
              key:'user_number'
          },
          {
              title:'中奖率',
              key:'win_odds',
              render:(h,params)=>{
                  return h('span',{},1+'/'+params.row.win_odds);
              }
          },
          {
            title:'状态',
            key:'status',
              render:(h,params)=>{
                  return h('Button',{
                      props:{
                          type:params.row.status == 1 ? 'info' : 'warning',
                          size:'small'
                      },
                      on:{
                          click:()=>{
                              self.$Modal.confirm({
                                  title:'提示',
                                  content:params.row.status == 1 ? '确定要暂停投放吗？' : '确定要开始投放吗？',
                                  onOk:()=>{
                                      self.changeStatus(params.row.id,params.row.status == 1 ? 2 : 1);
                                  }
                              });
                          }
                      }
                  },params.row.status == 1 ? '正常' : '暂停投放');
              }
          },
          {
              title:'操作',
              key:'control',
              render:(h,params)=>{
                   return h('div',[
                       h('Button',{
                           props:{
                               type:'primary',
                               size:'small'
                           },
                           style:{
                               marginRight:'5px'
                           },
                           on:{
                               click:()=>{
                                   this.doing = 'edit';
                                   this.treasure_id = params.row.id;
                                   this.data.name = params.row.name;
                                   this.data.icon = params.row.icon;
                                   this.data.money = params.row.money;
                                   this.data.number = parseInt(params.row.number);
                                   this.data.user_number = params.row.user_number == '不限量' ? 0 : parseInt(params.row.user_number);
                                   this.data.win_odds = parseInt(params.row.win_odds);
                                   self.bz_drawer = true;
                               }
                           }
                       },'修改')
                   ]);
              }
          }
      ],
      tr:[],  //宝藏列表
      //S选择系统宝藏抽屉
      system_bz:[],  //系统宝藏列表
      system_bz_index:0,  //系统宝藏操作下标index
      system_drawer:false,
      //E选择系统宝藏抽屉
      //S设置活动宝藏抽屉
      bz_drawer:false,
      //E设置活动宝藏抽屉
      //S添加修改的数据
      data:{
          activity_id: sysinfo.activity_id,  //活动id
          type:1,   // 宝藏类型
          name:'',  //宝藏名字
          icon:'',  //宝藏图标
          money:'',  //宝藏价值
          number:1,  // 投放数量
          user_number:0, // 每个用户最多获取数量
          win_odds:1   //中将几率
      },
      rules:{
          money:[
              {required:true,pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,message:'请输入正确的金额'},
          ],
          number:[
              {required:true,type:'number',min:1,message:'请输入正确的投放数量'},
              {pattern:/^\d+$/,message:'请输入正确的投放数量'}
          ],
          user_number: [
              {required:true,type:'number',min:0,message:'请输入正确的数量'},
              {pattern:/^\d+$/,message:'请输入正确的数量'}
          ],
          win_odds: [
              {required:true,type:'number',min:1,message:'请输入正确的中奖几率'},
              {pattern:/^\d+$/,message:'请输入正确的中奖几率'}
          ]
      },
      submit_loading:false,  //修改添加宝藏状态
      //E添加修改的数据
    }
  },
  created(){
    this.getSystemBz()
        .then(()=>{
            return this.getList();
        })
        .then(()=>{
            this.initSystemBz();
        })
        .catch(error=>console.log(error));
  },
  computed:{
      //活动投入资金
      invest(){
        if(this.tr.length > 0){
            var sum = 0;
            for(let i=0;i<this.tr.length;i++){
                sum += parseFloat(this.tr[i].money) * this.tr[i].number;
            }
            return common.toDecimal2(sum);
        }else{
            return '0.00';
        }
      },
      expend(){
          if(this.tr.length > 0){
              var sum = 0;
              for(let i=0;i<this.tr.length;i++){
                  sum += parseFloat(this.tr[i].money) * this.tr[i].give_number;
              }
              return common.toDecimal2(sum);
          }else{
              return '0.00';
          }
      }
  },
  methods:{
      //获取系统宝藏
      getSystemBz(){
        return new Promise((success)=>{
            Axios.post(sysinfo.url,Qs.stringify({
                pages:'treasure',
                doing:'li'
            }))
                .then((res)=>{
                    if(res.data.status == 'success'){
                        this.system_bz = res.data.data;
                        success();
                    }
                })
                .catch(error=>console.log(error));
        });
      },
      //获取活动投放列表
      getList(){
        return new Promise((success)=>{
            Axios.post(sysinfo.url,Qs.stringify({
                pages:'activityTreasure',
                doing:'getList',
                activity_id:this.activity_id,
                type:1
            }))
                .then((res)=>{
                    if(res.data.status == 'success'){
                        this.tr = res.data.data;
                    }else{
                        this.tr = [];
                    }
                    success();
                })
                .catch(error=>console.log(error));
        });
      },
      //初始化系统宝藏
      initSystemBz(){
        if(this.tr.length > 0 && this.system_bz.length>0){
            for(let i=0;i<this.tr.length;i++){
                for(let j=0;j<this.system_bz.length;j++){
                    if(this.system_bz[j].name == this.tr[i].name){
                        this.system_bz.splice(j,1);
                        break;
                    }
                }
            }
        }
      },
      //点击系统宝藏列表
      clickSystemBz(index){
          this.system_bz_index = index;
          this.doing = 'add';
          this.bz_drawer = true;
          var {name,icon} = this.system_bz[index];
          this.data.name = name;
          this.data.icon = icon;
          this.data.money = '';
          this.data.number = 1;
          this.data.user_number = 0;
          this.data.win_odds = 1;
      },
      //修改投放状态
      changeStatus(treasure_id,status){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activityTreasure',
            doing:'changeStatus',
            activity_id:this.activity_id,
            treasure_id,
            status
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.getSystemBz()
                        .then(()=>{
                            return this.getList();
                        })
                        .then(()=>{
                            this.initSystemBz();
                        })
                        .catch(error=>console.log(error));
                }else{
                    this.$Message.error('操作失败');
                }
            })
            .catch(error=>console.log(error));
      },
      //确认投放
      submit(data){
          this.$refs[data].validate((valid) => {
              if(valid){
                  this.submit_loading = true;
                  var data = {
                      pages:'activityTreasure',
                      doing:this.doing,
                      data:this.data
                  }
                  data.treasure_id = this.treasure_id;
                  Axios.post(sysinfo.url,Qs.stringify(data))
                      .then((res)=>{
                          if(res.data.status == 'success'){
                              this.$Message.success(this.doing == 'add' ? '投放成功' : '修改成功');
                              if(this.doing == 'add') this.system_bz.splice(this.system_bz_index,1);
                              this.data.money = '';
                              this.data.number = 1;
                              this.data.user_number = 0;
                              this.data.win_odds = 1;   //中将几率
                              this.bz_drawer = false;
                              this.submit_loading = false;
                              this.getList();
                          }else{
                              this.$Message.error(this.doing == 'add' ? '投放失败' : '修改失败');
                          }
                      })
                      .catch(error=>console.log(error));
              }
          })
      },
  }
}
</script>

<style scoped>
  .bz{
    position:relative;
    padding:10px;
  }
  #invest{
      height:40px;
      line-height: 40px;
      color:#ccc;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
  }
  #put-button{
     position:absolute;
     top:12px;
     right:10px;
  }
  .system-list{
      height:160px;
      cursor: pointer;
      background: none;
      box-sizing: border-box;
  }
  .system-list .icon{
      width:100%;
      height:110px;
      object-fit: contain;
   }
  .system-list .name{
      text-align: center;
  }
</style>
